<template class="navbar-container">
    <div class="navbar">
          <a href="#">概述页</a>
          <span></span>
          <a href="#">参数页</a>
          <span></span>
          <a href="#">F码通道</a>
          <span></span>
          <a href="#">咨询客服</a>
          <span></span>
          <a href="#">用户评价</a>
          <a class="nav_buy" @click="toShoppingCart">立即购买</a>
    </div>
</template>
<script>

export default{
    name: "NavBar",
    data(){
        return{
            // titleList:["概述页", "参数页", "F码通道", "咨询客服", "用户评价"],
            // url: []
        }
    },
    methods: {
        toShoppingCart(){

            this.$router.push({
                name:"ShoppingCart",
                query:{
                //携带参数跳转
                }
            })
        }
    }
}
</script>
<style scoped>
    .navbar{
        float: right;
        width: 500px;
        height: 30px;
    }

    .navbar span{
        margin-left: 8px;
        margin-right: 8px;
        line-height: 30px;
        width: 1px;
        background-color: #616161;
        height: 10px;
        display: inline-block;
    }

    .navbar a{
        text-decoration: none;
        font-size: 14px;
        color: #616161;
    }

    .navbar .separator{
        margin: 8px;
        font-size: 16px;
        color: #616161;
    }

    a:hover{
        color: #FF6700;
    }

    /*.navbar .nav_buy:hover{*/
    /*    color: #FFFFFF !important;*/
    /*}*/

    .navbar .nav_buy{
        cursor: pointer;
        margin-left: 8px;
        width: 120px;
        height: 30px;
        display: inline-block;
        background: #FF6700;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #FFFFFF;
        font-weight: 700;
    }
</style>
